വിഎസ് കോഡ് എക്സ്റ്റൻഷനുകൾ നിർമ്മിച്ച് ജാവാസ്ക്രിപ്റ്റ് ഡെവലപ്മെൻ്റ് ടൂൾസ് ഇൻ്റഗ്രേഷനിൽ വൈദഗ്ദ്ധ്യം നേടുക. നിങ്ങളുടെ വർക്ക്ഫ്ലോ മെച്ചപ്പെടുത്തുക, പ്രൊഡക്ടിവിറ്റി വർദ്ധിപ്പിക്കുക, കോഡിംഗ് എൻവയോൺമെൻ്റ് ഇഷ്ടാനുസൃതമാക്കുക.
ജാവാസ്ക്രിപ്റ്റ് ഡെവലപ്മെൻ്റ് ടൂൾസ് ഇൻ്റഗ്രേഷൻ: വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ ഡെവലപ്മെൻ്റ്
വിഷ്വൽ സ്റ്റുഡിയോ കോഡ് (വിഎസ് കോഡ്) ഇന്ന് കോഡ് എഡിറ്റർമാരുടെ ലോകത്ത് ഒരു പ്രധാന ശക്തിയായി മാറിയിരിക്കുന്നു. ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാർക്കിടയിൽ അതിൻ്റെ ഫ്ലെക്സിബിലിറ്റി, വിപുലമായ എക്സ്റ്റൻഷൻ ഇക്കോസിസ്റ്റം, മികച്ച ഫീച്ചറുകൾ എന്നിവ കാരണം ഇത് വളരെ പ്രിയപ്പെട്ടതാണ്. വിഎസ് കോഡിൻ്റെ ശക്തിയുടെ ഒരു പ്രധാന ഭാഗം അതിൻ്റെ എക്സ്റ്റൻസിബിലിറ്റിയാണ്, ഇത് ഡെവലപ്പർമാരെ അവരുടെ പ്രത്യേക ആവശ്യങ്ങൾക്കും വർക്ക്ഫ്ലോകൾക്കും അനുസരിച്ച് ഐഡിഇ ക്രമീകരിക്കാൻ അനുവദിക്കുന്നു. ഈ ലേഖനം, അടിസ്ഥാനകാര്യങ്ങൾ മുതൽ നൂതന സാങ്കേതിക വിദ്യകൾ വരെ ഉൾപ്പെടുത്തി, വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ ഡെവലപ്മെൻ്റിലൂടെ ജാവാസ്ക്രിപ്റ്റ് ഡെവലപ്മെൻ്റ് ടൂളുകൾ എങ്ങനെ സംയോജിപ്പിക്കാം എന്നതിനെക്കുറിച്ചുള്ള സമഗ്രമായ ഒരു ഗൈഡ് നൽകുന്നു.
എന്തുകൊണ്ട് ജാവാസ്ക്രിപ്റ്റിനായി വിഎസ് കോഡ് എക്സ്റ്റൻഷനുകൾ വികസിപ്പിക്കണം?
ജാവാസ്ക്രിപ്റ്റിനായി വിഎസ് കോഡ് എക്സ്റ്റൻഷനുകൾ വികസിപ്പിക്കുന്നത് വ്യക്തിഗത ഡെവലപ്പർമാർക്കും ടീമുകൾക്കും വിശാലമായ ജാവാസ്ക്രിപ്റ്റ് കമ്മ്യൂണിറ്റിക്കും നിരവധി നേട്ടങ്ങൾ നൽകുന്നു.
- മെച്ചപ്പെട്ട പ്രൊഡക്ടിവിറ്റി: ആവർത്തന ജോലികൾ ഓട്ടോമേറ്റ് ചെയ്യുക, വർക്ക്ഫ്ലോകൾ കാര്യക്ഷമമാക്കുക, മാന്വൽ പ്രയത്നം കുറയ്ക്കുക, ഇത് ഡെവലപ്പർമാരെ പ്രധാന ലോജിക്കിലും ക്രിയേറ്റീവ് പ്രശ്‌നപരിഹാരത്തിലും ശ്രദ്ധ കേന്ദ്രീകരിക്കാൻ സഹായിക്കുന്നു.
- ഇഷ്ടാനുസൃതമാക്കിയ കോഡിംഗ് എൻവയോൺമെൻ്റ്: പ്രത്യേക പ്രോജക്റ്റ് ആവശ്യകതകൾ, കോഡിംഗ് ശൈലികൾ, വ്യക്തിഗത മുൻഗണനകൾ എന്നിവയ്ക്ക് അനുസരിച്ച് ഐഡിഇ ക്രമീകരിക്കുക, ഇത് കൂടുതൽ സൗകര്യപ്രദവും കാര്യക്ഷമവുമായ ഡെവലപ്മെൻ്റ് അനുഭവം നൽകുന്നു.
- മെച്ചപ്പെട്ട കോഡ് ക്വാളിറ്റി: ലിൻ്ററുകൾ, ഫോർമാറ്ററുകൾ, കോഡ് അനാലിസിസ് ടൂളുകൾ എന്നിവ എഡിറ്ററിൽ നേരിട്ട് സംയോജിപ്പിക്കുക, ഇത് കോഡിൻ്റെ സ്ഥിരത ഉറപ്പാക്കുകയും, സാധ്യതയുള്ള പിശകുകൾ കണ്ടെത്തുകയും, മികച്ച രീതികളെ പ്രോത്സാഹിപ്പിക്കുകയും ചെയ്യുന്നു.
- തടസ്സമില്ലാത്ത ടൂൾ ഇൻ്റഗ്രേഷൻ: ബിൽഡ് സിസ്റ്റങ്ങൾ, ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്കുകൾ, ക്ലൗഡ് പ്ലാറ്റ്‌ഫോമുകൾ തുടങ്ങിയ ബാഹ്യ ടൂളുകളും സേവനങ്ങളും വിഎസ് കോഡിലേക്ക് നേരിട്ട് കൊണ്ടുവരിക, ഇത് ഒരു ഏകീകൃതവും സംയോജിതവുമായ ഡെവലപ്മെൻ്റ് എൻവയോൺമെൻ്റ് സൃഷ്ടിക്കുന്നു.
- കമ്മ്യൂണിറ്റി സംഭാവന: നിങ്ങളുടെ എക്സ്റ്റൻഷനുകൾ വിശാലമായ ജാവാസ്ക്രിപ്റ്റ് കമ്മ്യൂണിറ്റിയുമായി പങ്കുവെക്കുക, മറ്റ് ഡെവലപ്പർമാരെ നിങ്ങളുടെ ജോലിയിൽ നിന്ന് പ്രയോജനം നേടാൻ ശാക്തീകരിക്കുക, സഹകരണവും നവീകരണവും പ്രോത്സാഹിപ്പിക്കുക.
വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ ഡെവലപ്മെൻ്റിൻ്റെ അടിസ്ഥാനകാര്യങ്ങൾ
സാങ്കേതിക വിശദാംശങ്ങളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ ഡെവലപ്മെൻ്റിന് ആവശ്യമായ പ്രധാന ആശയങ്ങളും ടൂളുകളും നമുക്ക് പരിചയപ്പെടാം.
ആവശ്യമായവ
- Node.js, npm (അല്ലെങ്കിൽ yarn): Node.js ജാവാസ്ക്രിപ്റ്റ് റൺടൈം എൻവയോൺമെൻ്റ് നൽകുന്നു, പ്രോജക്റ്റ് ഡിപൻഡൻസികൾ കൈകാര്യം ചെയ്യാൻ npm (നോഡ് പാക്കേജ് മാനേജർ) അല്ലെങ്കിൽ yarn ഉപയോഗിക്കുന്നു. ഏറ്റവും പുതിയ പതിപ്പുകൾ ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. nodejs.org-ൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യുക.
- വിഎസ് കോഡ്: തീർച്ചയായും, നിങ്ങൾക്ക് വിഎസ് കോഡ് തന്നെ ആവശ്യമാണ്. code.visualstudio.com-ൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യുക.
- Yeoman, വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ ജനറേറ്റർ: പുതിയ പ്രോജക്റ്റുകൾ സൃഷ്ടിക്കുന്നത് എളുപ്പമാക്കുന്ന ഒരു സ്കാർഫോൾഡിംഗ് ടൂളാണ് യോമാൻ. വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ ജനറേറ്റർ വിഎസ് കോഡ് എക്സ്റ്റൻഷനുകൾക്കായി മുൻകൂട്ടി ക്രമീകരിച്ച ഒരു ടെംപ്ലേറ്റ് നൽകുന്നു. npm ഉപയോഗിച്ച് അവ ഗ്ലോബലായി ഇൻസ്റ്റാൾ ചെയ്യുക:
npm install -g yo generator-code
എക്സ്റ്റൻഷൻ മാനിഫെസ്റ്റ് (package.json)
നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ ഹൃദയമാണ് package.json ഫയൽ. ഇത് എക്സ്റ്റൻഷൻ്റെ മെറ്റാഡാറ്റ, ഡിപൻഡൻസികൾ, ആക്ടിവേഷൻ ഇവൻ്റുകൾ എന്നിവ നിർവചിക്കുന്നു. പ്രധാന പ്രോപ്പർട്ടികൾ ഉൾപ്പെടുന്നു:
- name: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ തനതായ ഐഡൻ്റിഫയർ.
- displayName: വിഎസ് കോഡ് മാർക്കറ്റ്പ്ലേസിലും എക്സ്റ്റൻഷൻ ലിസ്റ്റിലും പ്രദർശിപ്പിക്കുന്ന, മനുഷ്യർക്ക് വായിക്കാൻ കഴിയുന്ന പേര്.
- description: എക്സ്റ്റൻഷൻ്റെ ഉദ്ദേശ്യത്തെക്കുറിച്ചുള്ള ഒരു ചെറിയ വിവരണം.
- version: എക്സ്റ്റൻഷൻ്റെ പതിപ്പ് നമ്പർ.
- publisher: നിങ്ങളുടെ പബ്ലിഷർ ഐഡി (വിഎസ് കോഡ് മാർക്കറ്റ്പ്ലേസിൽ പ്രസിദ്ധീകരിക്കാൻ ആവശ്യമാണ്).
- engines.vscode: എക്സ്റ്റൻഷൻ്റെ പ്രവർത്തനത്തിന് ആവശ്യമായ ഏറ്റവും കുറഞ്ഞ വിഎസ് കോഡ് പതിപ്പ്.
- activationEvents: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ ആക്ടിവേഷന് കാരണമാകുന്ന ഇവൻ്റുകളുടെ ഒരു നിര. സാധാരണ ഇവൻ്റുകളിൽ
onCommand:yourCommandId,onLanguage:languageId,*(സ്റ്റാർട്ടപ്പിൽ ആക്ടിവേറ്റ് ചെയ്യുന്നു) എന്നിവ ഉൾപ്പെടുന്നു. മികച്ച പ്രകടനത്തിനായി പ്രത്യേക ആക്ടിവേഷൻ ഇവൻ്റുകൾ ഉപയോഗിക്കുന്നത് നിർണായകമാണ്. - main: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ കോഡ് അടങ്ങുന്ന പ്രധാന ജാവാസ്ക്രിപ്റ്റ് ഫയലിലേക്കുള്ള പാത.
- contributes: കമാൻഡുകൾ, മെനുകൾ, ക്രമീകരണങ്ങൾ, വ്യൂകൾ എന്നിങ്ങനെ വിഎസ് കോഡിലേക്കുള്ള എക്സ്റ്റൻഷൻ്റെ സംഭാവനകൾ നിർവചിക്കുന്ന ഒരു ഒബ്ജക്റ്റ്.
- dependencies: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ആശ്രയിക്കുന്ന npm പാക്കേജുകളുടെ ഒരു ലിസ്റ്റ്.
- devDependencies: ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്കുകൾ, ബിൽഡ് ടൂളുകൾ തുടങ്ങിയ ഡെവലപ്മെൻ്റിന് ആവശ്യമായ npm പാക്കേജുകളുടെ ഒരു ലിസ്റ്റ്.
package.json-ൻ്റെ ഒരു ഉദാഹരണം:
{
"name": "my-javascript-tools",
"displayName": "My JavaScript Tools",
"description": "A collection of useful JavaScript development tools.",
"version": "0.0.1",
"publisher": "my-publisher",
"engines": {
"vscode": "^1.70.0"
},
"activationEvents": [
"onCommand:my-javascript-tools.formatCode",
"onLanguage:javascript"
],
"main": "./extension.js",
"contributes": {
"commands": [
{
"command": "my-javascript-tools.formatCode",
"title": "Format JavaScript Code"
}
]
},
"dependencies": {
"prettier": "^2.7.0"
},
"devDependencies": {
"@types/vscode": "^1.70.0",
"typescript": "^4.7.0"
}
}
എക്സ്റ്റൻഷൻ API
വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ API, എഡിറ്ററുമായി സംവദിക്കുന്നതിനും അതിൻ്റെ ഫീച്ചറുകൾ ആക്സസ് ചെയ്യുന്നതിനും അതിൻ്റെ പ്രവർത്തനം മാറ്റുന്നതിനും വിപുലമായ ഇൻ്റർഫേസുകളും ഫംഗ്ഷനുകളും നൽകുന്നു. പ്രധാന API ആശയങ്ങളുമായി പരിചയപ്പെടുക:
vscode.commands: കമാൻഡുകൾ രജിസ്റ്റർ ചെയ്യുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യുക.vscode.languages: കോഡ് കംപ്ലീഷൻ, ഹോവറുകൾ, ഡയഗ്നോസ്റ്റിക്സ് തുടങ്ങിയ ഭാഷാ ഫീച്ചറുകൾ രജിസ്റ്റർ ചെയ്യുക.vscode.window: എഡിറ്റർ വിൻഡോയുമായി സംവദിക്കുക, സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുക, ഉപയോക്താവിൽ നിന്ന് ഇൻപുട്ട് ആവശ്യപ്പെടുക.vscode.workspace: ഫയലുകൾ, ഫോൾഡറുകൾ, ക്രമീകരണങ്ങൾ തുടങ്ങിയ വർക്ക്സ്പേസുമായി ബന്ധപ്പെട്ട വിവരങ്ങൾ ആക്സസ് ചെയ്യുക.vscode.debug: ഡീബഗ്ഗിംഗ് കഴിവുകൾ വികസിപ്പിക്കുക.vscode.scm: സോഴ്സ് കൺട്രോൾ സിസ്റ്റങ്ങളുമായി സംയോജിപ്പിക്കുക.
ആക്ടിവേഷൻ ഇവൻ്റുകൾ
നിങ്ങളുടെ എക്സ്റ്റൻഷൻ എപ്പോൾ ലോഡ് ചെയ്യണമെന്നും ആക്ടിവേറ്റ് ചെയ്യണമെന്നും നിയന്ത്രിക്കുന്നതിന് ആക്ടിവേഷൻ ഇവൻ്റുകൾ നിർണായകമാണ്. പ്രത്യേക ആക്ടിവേഷൻ ഇവൻ്റുകൾ ഉപയോഗിക്കുന്നത് വിഎസ് കോഡിൻ്റെ സ്റ്റാർട്ടപ്പ് പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തും. സാധാരണ ആക്ടിവേഷൻ ഇവൻ്റുകൾ ഉൾപ്പെടുന്നു:
onCommand:<commandId>: ഒരു പ്രത്യേക കമാൻഡ് എക്സിക്യൂട്ട് ചെയ്യുമ്പോൾ ആക്ടിവേറ്റ് ചെയ്യുന്നു.onLanguage:<languageId>: ഒരു പ്രത്യേക ഭാഷയിലുള്ള ഫയൽ തുറക്കുമ്പോൾ ആക്ടിവേറ്റ് ചെയ്യുന്നു.onFileSystem:<scheme>: ഒരു പ്രത്യേക ഫയൽ സിസ്റ്റം സ്കീം ഉള്ള ഫയൽ തുറക്കുമ്പോൾ (ഉദാ.file,git,ftp) ആക്ടിവേറ്റ് ചെയ്യുന്നു.onDebug: ഡീബഗ്ഗർ ആരംഭിക്കുമ്പോൾ ആക്ടിവേറ്റ് ചെയ്യുന്നു.onTest: ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുമ്പോൾ ആക്ടിവേറ്റ് ചെയ്യുന്നു.onView:<viewId>: സൈഡ്‌ബാറിൽ ഒരു പ്രത്യേക വ്യൂ ദൃശ്യമാകുമ്പോൾ ആക്ടിവേറ്റ് ചെയ്യുന്നു.*: സ്റ്റാർട്ടപ്പിൽ ആക്ടിവേറ്റ് ചെയ്യുന്നു (പ്രകടനത്തെ ബാധിക്കുമെന്നതിനാൽ മിതമായി ഉപയോഗിക്കുക).
നിങ്ങളുടെ ആദ്യ വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ നിർമ്മിക്കുന്നു
പ്രീറ്റിയർ (Prettier) ഉപയോഗിച്ച് ജാവാസ്ക്രിപ്റ്റ് കോഡ് ഫോർമാറ്റ് ചെയ്യുന്ന ഒരു ലളിതമായ വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ നിർമ്മിക്കുന്ന പ്രക്രിയയിലൂടെ നമുക്ക് കടന്നുപോകാം.
എക്സ്റ്റൻഷൻ സ്കാർഫോൾഡ് ചെയ്യുന്നു
- ഒരു ടെർമിനൽ തുറന്ന് നിങ്ങളുടെ എക്സ്റ്റൻഷൻ നിർമ്മിക്കാൻ ആഗ്രഹിക്കുന്ന ഡയറക്ടറിയിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക.
- വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ ജനറേറ്റർ പ്രവർത്തിപ്പിക്കുക:
yo code - ചോദ്യങ്ങൾക്ക് ഉത്തരം നൽകുക:
New JavaScript Extensionതിരഞ്ഞെടുക്കുക.- എക്സ്റ്റൻഷൻ്റെ പേര് നൽകുക (ഉദാ.
javascript-formatter). - എക്സ്റ്റൻഷൻ ഐഡൻ്റിഫയർ നൽകുക (ഉദാ.
javascript-formatter). - ഒരു വിവരണം നൽകുക (ഉദാ.
Prettier ഉപയോഗിച്ച് ജാവാസ്ക്രിപ്റ്റ് കോഡ് ഫോർമാറ്റ് ചെയ്യുന്നു.). - ടൈപ്പ്സ്ക്രിപ്റ്റ് പ്രവർത്തനക്ഷമമാക്കണോ എന്ന് തിരഞ്ഞെടുക്കുക (ഈ ഉദാഹരണത്തിൽ, നമ്മൾ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കും, എന്നാൽ വലിയ പ്രോജക്റ്റുകൾക്ക് ടൈപ്പ്സ്ക്രിപ്റ്റ് വളരെ ശുപാർശ ചെയ്യപ്പെടുന്നു).
- ഒരു ഗിറ്റ് റിപ്പോസിറ്ററി ആരംഭിക്കണോ എന്ന് തിരഞ്ഞെടുക്കുക.
പ്രീറ്റിയർ ഇൻസ്റ്റാൾ ചെയ്യുന്നു
നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ ഡിപൻഡൻസിയായി പ്രീറ്റിയർ ഇൻസ്റ്റാൾ ചെയ്യുക:
cd javascript-formatter
npm install prettier --save
ഫോർമാറ്റിംഗ് ലോജിക് നടപ്പിലാക്കുന്നു
extension.js ഫയൽ തുറക്കുക. ഈ ഫയലിലാണ് നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ പ്രധാന ലോജിക് അടങ്ങിയിരിക്കുന്നത്. നിലവിലുള്ള കോഡിന് പകരം ഇനിപ്പറയുന്നവ ചേർക്കുക:
const vscode = require('vscode');
const prettier = require('prettier');
/**
* @param {vscode.ExtensionContext} context
*/
function activate(context) {
console.log('Congratulations, your extension "javascript-formatter" is now active!');
let disposable = vscode.commands.registerCommand('javascript-formatter.formatCode', async () => {
const editor = vscode.window.activeTextEditor;
if (!editor) {
vscode.window.showInformationMessage('No active text editor.');
return;
}
const document = editor.document;
const text = document.getText();
try {
const formattedText = prettier.format(text, {
parser: 'babel',
tabWidth: 2,
semi: true,
singleQuote: true,
trailingComma: 'es5',
bracketSpacing: true,
arrowParens: 'always',
printWidth: 80
});
editor.edit(editBuilder => {
editBuilder.replace(new vscode.Range(
document.positionAt(0),
document.positionAt(text.length)
), formattedText);
});
} catch (error) {
vscode.window.showErrorMessage(`Error formatting code: ${error.message}`);
}
});
context.subscriptions.push(disposable);
}
function deactivate() {}
module.exports = {
activate,
deactivate
}
package.json അപ്ഡേറ്റ് ചെയ്യുന്നു
കമാൻഡ് രജിസ്റ്റർ ചെയ്യാനും ആക്ടിവേഷൻ ഇവൻ്റ് വ്യക്തമാക്കാനും package.json ഫയൽ പരിഷ്കരിക്കുക. contributes വിഭാഗത്തിൽ ഇനിപ്പറയുന്നവ ചേർക്കുക:
"contributes": {
"commands": [
{
"command": "javascript-formatter.formatCode",
"title": "Format JavaScript Code"
}
]
},
കൂടാതെ activationEvents വിഭാഗം അപ്ഡേറ്റ് ചെയ്യുക:
"activationEvents": [
"onCommand:javascript-formatter.formatCode",
"onLanguage:javascript"
],
എക്സ്റ്റൻഷൻ ടെസ്റ്റ് ചെയ്യുന്നു
- ഒരു പുതിയ വിഎസ് കോഡ് വിൻഡോയിൽ (എക്സ്റ്റൻഷൻ ഡെവലപ്മെൻ്റ് ഹോസ്റ്റ്) എക്സ്റ്റൻഷൻ ലോഞ്ച് ചെയ്യാൻ
F5അമർത്തുക. - എക്സ്റ്റൻഷൻ ഡെവലപ്മെൻ്റ് ഹോസ്റ്റിൽ ഒരു ജാവാസ്ക്രിപ്റ്റ് ഫയൽ തുറക്കുക.
- കമാൻഡ് പാലറ്റ് തുറക്കാൻ
Ctrl+Shift+P(macOS-ൽCmd+Shift+P) അമർത്തുക. Format JavaScript Codeഎന്ന് ടൈപ്പ് ചെയ്ത് കമാൻഡ് തിരഞ്ഞെടുക്കുക.- സജീവമായ എഡിറ്ററിലെ ജാവാസ്ക്രിപ്റ്റ് കോഡ് പ്രീറ്റിയർ ഉപയോഗിച്ച് ഫോർമാറ്റ് ചെയ്യപ്പെടും.
വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ ഡെവലപ്മെൻ്റിനുള്ള നൂതന സാങ്കേതിക വിദ്യകൾ
അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കിക്കഴിഞ്ഞാൽ, കൂടുതൽ സങ്കീർണ്ണവും ശക്തവുമായ വിഎസ് കോഡ് എക്സ്റ്റൻഷനുകൾ നിർമ്മിക്കുന്നതിന് നൂതന സാങ്കേതിക വിദ്യകൾ പര്യവേക്ഷണം ചെയ്യാവുന്നതാണ്.
ലാംഗ്വേജ് സെർവർ പ്രോട്ടോക്കോൾ (LSP)
ലാംഗ്വേജ് സെർവറുകൾക്ക് ഐഡിഇ-കളുമായി ആശയവിനിമയം നടത്തുന്നതിനുള്ള ഒരു സ്റ്റാൻഡേർഡ് മാർഗ്ഗം ലാംഗ്വേജ് സെർവർ പ്രോട്ടോക്കോൾ (LSP) നിർവചിക്കുന്നു. LSP ഉപയോഗിക്കുന്നത് ഇനിപ്പറയുന്നതുപോലുള്ള നൂതന ഭാഷാ ഫീച്ചറുകൾ നൽകാൻ നിങ്ങളെ അനുവദിക്കുന്നു:
- കോഡ് കംപ്ലീഷൻ (IntelliSense): നിലവിലെ സന്ദർഭത്തെ അടിസ്ഥാനമാക്കി പ്രസക്തമായ കോഡ് കംപ്ലീഷനുകൾ നിർദ്ദേശിക്കുക.
- Go to definition: ഒരു ചിഹ്നത്തിൻ്റെ നിർവചനത്തിലേക്ക് നാവിഗേറ്റ് ചെയ്യുക.
- Find all references: വർക്ക്‌സ്‌പെയ്‌സിലെ ഒരു ചിഹ്നത്തിൻ്റെ എല്ലാ സന്ദർഭങ്ങളും കണ്ടെത്തുക.
- Rename symbol: ഒരു ചിഹ്നത്തിൻ്റെ പേരുമാറ്റുകയും എല്ലാ റഫറൻസുകളും അപ്ഡേറ്റ് ചെയ്യുകയും ചെയ്യുക.
- കോഡ് ഡയഗ്നോസ്റ്റിക്സ് (ലിൻ്റിംഗും പിശക് പരിശോധനയും): സാധ്യതയുള്ള പിശകുകൾ കണ്ടെത്തുകയും മെച്ചപ്പെടുത്തുന്നതിനുള്ള നിർദ്ദേശങ്ങൾ നൽകുകയും ചെയ്യുക.
vscode-languageserver പോലുള്ള ലൈബ്രറികൾ LSP അടിസ്ഥാനമാക്കിയുള്ള എക്സ്റ്റൻഷനുകളുടെ വികസനം ലളിതമാക്കുന്നു.
ഡീബഗ്ഗിംഗ് പിന്തുണ
വിഎസ് കോഡ് അതിൻ്റെ ഡീബഗ്ഗിംഗ് കഴിവുകൾ വികസിപ്പിക്കാൻ അനുവദിക്കുന്ന ശക്തമായ ഒരു ഡീബഗ്ഗിംഗ് API നൽകുന്നു. നിങ്ങൾക്ക് ഇവ ചെയ്യാനാകും:
- ഇഷ്ടാനുസൃത ഡീബഗ് അഡാപ്റ്ററുകൾ നിർമ്മിക്കുക: ഇഷ്ടാനുസൃത ഭാഷകളുടെയോ റൺടൈമുകളുടെയോ ഡീബഗ്ഗിംഗിനെ പിന്തുണയ്ക്കുക.
- ഡീബഗ് കോൺഫിഗറേഷനുകൾ സംഭാവന ചെയ്യുക: പ്രത്യേക പ്രോജക്റ്റ് തരങ്ങൾക്കായി മുൻകൂട്ടി ക്രമീകരിച്ച ഡീബഗ് കോൺഫിഗറേഷനുകൾ നൽകുക.
- ഇഷ്ടാനുസൃത ഡീബഗ് വ്യൂകൾ ചേർക്കുക: ഇഷ്ടാനുസൃത വ്യൂകളിൽ ഡീബഗ്ഗിംഗ് വിവരങ്ങൾ പ്രദർശിപ്പിക്കുക.
വെബ് വ്യൂകളുമായി പ്രവർത്തിക്കുന്നു
വിഎസ് കോഡിനുള്ളിൽ വെബ് അധിഷ്ഠിത യുഐ-കൾ ഉൾപ്പെടുത്താൻ വെബ് വ്യൂകൾ നിങ്ങളെ അനുവദിക്കുന്നു. സങ്കീർണ്ണമായ കോൺഫിഗറേഷൻ പാനലുകൾ, ഇൻ്ററാക്ടീവ് ഡോക്യുമെൻ്റേഷൻ വ്യൂവറുകൾ, അല്ലെങ്കിൽ വിഷ്വലൈസേഷനുകൾ എന്നിവ നിർമ്മിക്കുന്നതിന് ഇത് ഉപയോഗപ്രദമാണ്. യുഐ നിർമ്മിക്കുന്നതിനും സന്ദേശങ്ങൾ കൈമാറുന്നതിലൂടെ എക്സ്റ്റൻഷൻ്റെ ബാക്കെൻഡുമായി ആശയവിനിമയം നടത്തുന്നതിനും നിങ്ങൾക്ക് HTML, CSS, JavaScript എന്നിവ ഉപയോഗിക്കാം.
ക്രമീകരണങ്ങളും കോൺഫിഗറേഷനും
ക്രമീകരണങ്ങളിലൂടെ നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ പ്രവർത്തനം ഇഷ്ടാനുസൃതമാക്കാൻ ഉപയോക്താക്കളെ അനുവദിക്കുക. package.json ഫയലിൻ്റെ contributes.configuration വിഭാഗത്തിൽ ക്രമീകരണങ്ങൾ നിർവചിക്കുക. vscode.workspace.getConfiguration() API ഉപയോഗിച്ച് ക്രമീകരണങ്ങൾ ആക്സസ് ചെയ്യുക.
നിങ്ങളുടെ എക്സ്റ്റൻഷൻ ടെസ്റ്റ് ചെയ്യുന്നു
നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ ഗുണനിലവാരവും വിശ്വാസ്യതയും ഉറപ്പാക്കുന്നതിന് അത് സമഗ്രമായി ടെസ്റ്റ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. യൂണിറ്റ് ടെസ്റ്റുകളും ഇൻ്റഗ്രേഷൻ ടെസ്റ്റുകളും എഴുതാൻ മോക്ക (Mocha), ചായ് (Chai) പോലുള്ള ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്കുകൾ ഉപയോഗിക്കുക. എഡിറ്ററിനുള്ളിൽ ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുന്നതിന് വിഎസ് കോഡ് ഇൻ-ബിൽറ്റ് പിന്തുണ നൽകുന്നു.
വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ ഡെവലപ്മെൻ്റിനുള്ള മികച്ച രീതികൾ
ഈ മികച്ച രീതികൾ പിന്തുടരുന്നത് ഉയർന്ന നിലവാരമുള്ളതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതും ഉപയോക്തൃ-സൗഹൃദപരവുമായ വിഎസ് കോഡ് എക്സ്റ്റൻഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ സഹായിക്കും:
- ടൈപ്പ്സ്ക്രിപ്റ്റ് ഉപയോഗിക്കുക: ടൈപ്പ്സ്ക്രിപ്റ്റ് സ്റ്റാറ്റിക് ടൈപ്പിംഗ് നൽകുന്നു, ഇത് പിശകുകൾ നേരത്തെ കണ്ടെത്താനും കോഡ് പരിപാലനം മെച്ചപ്പെടുത്താനും സഹായിക്കുന്നു.
- അസിൻക്രണസ് പ്രോഗ്രാമിംഗ് ഉപയോഗിക്കുക:
async/awaitപോലുള്ള അസിൻക്രണസ് പ്രോഗ്രാമിംഗ് ടെക്നിക്കുകൾ ഉപയോഗിച്ച് യുഐ ത്രെഡ് ബ്ലോക്ക് ചെയ്യുന്നത് ഒഴിവാക്കുക. - പിശകുകൾ ഭംഗിയായി കൈകാര്യം ചെയ്യുക: തകരാറുകൾ തടയുന്നതിനും ഉപയോക്താവിന് വിവരദായകമായ പിശക് സന്ദേശങ്ങൾ നൽകുന്നതിനും ശരിയായ എറർ ഹാൻഡ്ലിംഗ് നടപ്പിലാക്കുക.
- നിങ്ങളുടെ കോഡ് ഡോക്യുമെൻ്റ് ചെയ്യുക: മറ്റ് ഡെവലപ്പർമാർക്ക് നിങ്ങളുടെ എക്സ്റ്റൻഷൻ മനസ്സിലാക്കാനും ഉപയോഗിക്കാനും സഹായിക്കുന്നതിന് വ്യക്തവും സംക്ഷിപ്തവുമായ ഡോക്യുമെൻ്റേഷൻ എഴുതുക.
- വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിക്കുക: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ നന്നായി പ്രവർത്തിക്കുന്നുവെന്നും എഡിറ്ററുമായി തടസ്സമില്ലാതെ സംയോജിക്കുന്നുവെന്നും ഉറപ്പാക്കാൻ വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിക്കുക. ഈ മാർഗ്ഗനിർദ്ദേശങ്ങളിൽ പ്രകടനം, സുരക്ഷ, ഉപയോക്തൃ അനുഭവം തുടങ്ങിയ വിഷയങ്ങൾ ഉൾപ്പെടുന്നു.
- സെമാൻ്റിക് പതിപ്പ് ഉപയോഗിക്കുക: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ്റെ പുതിയ പതിപ്പുകൾ പുറത്തിറക്കുമ്പോൾ സെമാൻ്റിക് പതിപ്പിൻ്റെ (SemVer) തത്വങ്ങൾ പാലിക്കുക.
- നിങ്ങളുടെ എക്സ്റ്റൻഷൻ കാലികമായി നിലനിർത്തുക: പുതിയ ഫീച്ചറുകൾ ഉൾപ്പെടുത്തുന്നതിനും ബഗുകൾ പരിഹരിക്കുന്നതിനും സുരക്ഷാ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നതിനും നിങ്ങളുടെ എക്സ്റ്റൻഷൻ പതിവായി അപ്ഡേറ്റ് ചെയ്യുക.
- അന്താരാഷ്ട്രവൽക്കരണം (i18n), പ്രാദേശികവൽക്കരണം (l10n): വിഎസ് കോഡിൻ്റെ ആഗോള പ്രേക്ഷകരെ പരിഗണിച്ച് നിങ്ങളുടെ എക്സ്റ്റൻഷൻ i18n/l10n മനസ്സിൽ വെച്ചുകൊണ്ട് രൂപകൽപ്പന ചെയ്യുക. ഇതിൽ സ്ട്രിംഗുകൾ ബാഹ്യവൽക്കരിക്കുന്നതും വിവിധ ഭാഷകൾക്കായി വിവർത്തനങ്ങൾ നൽകുന്നതും ഉൾപ്പെടുന്നു.
- പ്രവേശനക്ഷമത: നിങ്ങളുടെ എക്സ്റ്റൻഷൻ വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് പ്രവേശനക്ഷമമാണെന്ന് ഉറപ്പാക്കുക. നിങ്ങളുടെ യുഐ രൂപകൽപ്പന ചെയ്യുമ്പോൾ പ്രവേശനക്ഷമതാ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിക്കുകയും ടെസ്റ്റിംഗിനായി സഹായകരമായ സാങ്കേതികവിദ്യകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുകയും ചെയ്യുക.
നിങ്ങളുടെ എക്സ്റ്റൻഷൻ പ്രസിദ്ധീകരിക്കുന്നു
നിങ്ങളുടെ എക്സ്റ്റൻഷനിൽ നിങ്ങൾ തൃപ്തനാണെങ്കിൽ, അത് വിഎസ് കോഡ് മാർക്കറ്റ്പ്ലേസിൽ പ്രസിദ്ധീകരിക്കാം, ഇത് ലോകമെമ്പാടുമുള്ള ദശലക്ഷക്കണക്കിന് ഡെവലപ്പർമാർക്ക് ലഭ്യമാകും.
- ഒരു Azure DevOps അക്കൗണ്ട് ഉണ്ടാക്കുക: നിങ്ങളുടെ എക്സ്റ്റൻഷനുകൾ കൈകാര്യം ചെയ്യാൻ നിങ്ങൾക്ക് ഒരു Azure DevOps അക്കൗണ്ട് ആവശ്യമാണ്.
vsceടൂൾ ഇൻസ്റ്റാൾ ചെയ്യുക: വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ മാനേജർ (vsce) എക്സ്റ്റൻഷനുകൾ പാക്കേജ് ചെയ്യാനും പ്രസിദ്ധീകരിക്കാനുമുള്ള ഒരു കമാൻഡ്-ലൈൻ ടൂളാണ്.npm install -g vsce- നിങ്ങളുടെ എക്സ്റ്റൻഷൻ പാക്കേജ് ചെയ്യുക:
vsce package - നിങ്ങളുടെ എക്സ്റ്റൻഷൻ പ്രസിദ്ധീകരിക്കുക:
vsce publish
നിങ്ങളുടെ എക്സ്റ്റൻഷൻ പ്രസിദ്ധീകരിക്കുന്നതിനെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾക്ക് വിഎസ് കോഡ് മാർക്കറ്റ്പ്ലേസ് വെബ്സൈറ്റിലെ നിർദ്ദേശങ്ങൾ പാലിക്കുക.
ജാവാസ്ക്രിപ്റ്റ് വിഎസ് കോഡ് എക്സ്റ്റൻഷനുകളുടെ യഥാർത്ഥ ലോക ഉദാഹരണങ്ങൾ
ടൂൾസ് ഇൻ്റഗ്രേഷൻ്റെ ശക്തി പ്രകടമാക്കുന്ന ചില പ്രശസ്തമായ ജാവാസ്ക്രിപ്റ്റ് വിഎസ് കോഡ് എക്സ്റ്റൻഷനുകളുടെ ഉദാഹരണങ്ങൾ താഴെ നൽകുന്നു:
- ESLint: ESLint ലിൻ്ററിനെ വിഎസ് കോഡുമായി സംയോജിപ്പിക്കുന്നു, ഇത് തത്സമയ കോഡ് വിശകലനവും സാധ്യതയുള്ള പിശകുകൾ ഹൈലൈറ്റ് ചെയ്യുകയും ചെയ്യുന്നു.
- Prettier: ഒരു സ്ഥിരമായ ശൈലി അനുസരിച്ച് ജാവാസ്ക്രിപ്റ്റ് കോഡ് യാന്ത്രികമായി ഫോർമാറ്റ് ചെയ്യുന്നു.
- JavaScript (ES6) code snippets: ജാവാസ്ക്രിപ്റ്റ് ഡെവലപ്മെൻ്റിനായി ഉപയോഗപ്രദമായ കോഡ് സ്നിപ്പെറ്റുകളുടെ ഒരു ശേഖരം നൽകുന്നു.
- Debugger for Chrome: ക്രോമിൽ പ്രവർത്തിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് കോഡ് വിഎസ് കോഡിൽ നിന്ന് നേരിട്ട് ഡീബഗ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
- npm Intellisense: ഇംപോർട്ട് സ്റ്റേറ്റ്മെൻ്റുകളിൽ npm മൊഡ്യൂളുകൾ ഓട്ടോകംപ്ലീറ്റ് ചെയ്യുന്നു.
ഈ എക്സ്റ്റൻഷനുകൾ, കൂടുതൽ കാര്യക്ഷമവും ഉൽപ്പാദനക്ഷമവുമായ ഒരു ഡെവലപ്മെൻ്റ് എൻവയോൺമെൻ്റ് സൃഷ്ടിക്കുന്നതിനായി വിഎസ് കോഡിനെ എങ്ങനെ ഇഷ്ടാനുസൃതമാക്കാമെന്നും വികസിപ്പിക്കാമെന്നും കാണിക്കുന്നു.
ഉപസംഹാരം
വിഎസ് കോഡ് എക്സ്റ്റൻഷൻ ഡെവലപ്മെൻ്റ് നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ഡെവലപ്മെൻ്റ് വർക്ക്ഫ്ലോ മെച്ചപ്പെടുത്തുന്നതിനും ബാഹ്യ ടൂളുകൾ സംയോജിപ്പിക്കുന്നതിനും വിശാലമായ ജാവാസ്ക്രിപ്റ്റ് കമ്മ്യൂണിറ്റിക്ക് സംഭാവന നൽകുന്നതിനുമുള്ള ഒരു ശക്തമായ മാർഗമാണ്. എക്സ്റ്റൻഷൻ API-യുടെ അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കുകയും, നൂതന സാങ്കേതിക വിദ്യകൾ പഠിക്കുകയും, മികച്ച രീതികൾ പിന്തുടരുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് യഥാർത്ഥ ലോക പ്രശ്നങ്ങൾ പരിഹരിക്കുകയും ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാരുടെ ജീവിതം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്ന സ്വാധീനമുള്ള എക്സ്റ്റൻഷനുകൾ നിർമ്മിക്കാൻ കഴിയും. എക്സ്റ്റൻസിബിലിറ്റിയുടെ ശക്തിയെ സ്വീകരിച്ച് വിഎസ് കോഡിൻ്റെ മുഴുവൻ കഴിവുകളും അൺലോക്ക് ചെയ്യുക!